.container {
  position: relative;
  overflow: hidden;
}
.parent {
  position: relative;
}
.son {
  position: absolute;
  width: 100%;
}
.header {
  width: 100%;
  height: 576rpx;
  background: #c4eafd;
  display: block;
}
.body {
  background: #c4eafd;
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: calc(128rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
}
.item-box {
  position: relative;
  width: 690rpx;
  background: linear-gradient(180deg, #e5eeff 68%, #d4e2ff 100%);
  box-shadow: 0rpx 9rpx 23rpx 0rpx rgba(143, 182, 241, 0.53);
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 24rpx;
  margin-top: 80rpx;
  z-index: 1;
}
.title {
  position: absolute;
  top: -66rpx;
  left: 50%;
  transform: translateX(-50%);
}
.title-name {
  font-size: 40rpx;
  color: #2b40ea;
  font-weight: bold;
  margin: 0 20rpx;
}
.title-box {
  margin-top: -74rpx;
}
.icon {
  width: 6rpx;
  height: 25rpx;
  border-radius: 3px;
  background-color: #2b40ea;
  position: relative;
  &::before {
    position: absolute;
    content: "";
    width: 6rpx;
    height: 15rpx;
    border-radius: 3px;
    background-color: #4e76f2;
    top: 50%;
    transform: translateY(-50%);
    left: -15rpx;
  }
}
.icon-reverse {
  width: 6rpx;
  height: 25rpx;
  border-radius: 3px;
  background-color: #2b40ea;
  position: relative;
  &::after {
    position: absolute;
    content: "";
    width: 6rpx;
    height: 15rpx;
    border-radius: 3px;
    background-color: #4e76f2;
    top: 50%;
    transform: translateY(-50%);
    right: -15rpx;
  }
}
.icon-title {
  width: 410rpx;
  height: 90rpx;
}

.item-container {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  border-radius: 24rpx;
  padding: 42rpx 0;
}
.icon-success {
  width: 72rpx;
  height: 80rpx;
}
.flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.text-1 {
  font-size: 26rpx;
  line-height: 34rpx;
  color: #2b40ea;
  font-weight: bold;
}
.flex-around {
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.border {
  border-left: 2rpx solid #e3d5fd;
  border-right: 2rpx solid #e3d5fd;
  padding: 0 16rpx;
}
.sub-title {
  width: 410rpx;
  margin: 0 auto 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-weight: bold;
  font-size: 30rpx;
  background: linear-gradient(90deg, rgba(222, 205, 255, 0) 6%, #c3d8ff 50%, rgba(222, 205, 255, 0) 92%);
}
.icon-dot {
  width: 24rpx;
  height: 26rpx;
  margin-top: 4rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}
.item-wrap {
  padding: 0 24rpx;
}
.mg-b-24 {
  margin-bottom: 24rpx;
}
.mg-t-110 {
  margin-top: 110rpx;
}
.button-box {
  position: fixed;
  width: 100%;
  height: calc(108rpx + constant(safe-area-inset-bottom));
  height: calc(108rpx + env(safe-area-inset-bottom));
  padding: 10rpx 24rpx;
  left: 0;
  bottom: 0;
  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #fff;
  z-index: 2;
}
.btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(96deg, #f48dff 1%, #27c9ff 92%);
  color: #fff;
  font-size: 32rpx;
  text-align: center;
}
.icon-phone {
  width: 38rpx;
  height: 38rpx;
  margin-right: 8rpx;
}
.radio-gradient {
  position: absolute;
  left: 623rpx;
  top: 675rpx;
  width: 363rpx;
  height: 355rpx;
  opacity: 0.2;
  background: radial-gradient(#ef5cff 63rpx, transparent 200rpx);
}
.radio-gradient2 {
  position: absolute;
  left: -239rpx;
  top: 1298rpx;
  width: 363rpx;
  height: 355rpx;
  opacity: 0.2;
  background: radial-gradient(#ef5cff 63rpx, transparent 200rpx);
}
